import React from 'react'
import { List, Typography } from 'antd'
import { useChecked } from './use-checked'
import './index.css'

export interface CartItem {
  id: number;
  name: string;
  price: number
}

export type CartItems = CartItem[]

const cartData = Array(5)
  .fill(undefined)
  .map((v, i) => ({
    id: i,
    name: `商品${i}`,
    price: Math.round(Math.random() * 100)
  }))

const Cart: React.FC = () => {
  const { checkedAll } = useChecked(cartData)

  // 事件限定为change事件,泛型约束为input输入框元素
  const onWrapCheckedAllChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const checkAll = e.target.checked
  }
  const Footer = (
    <div className="footer">
      <div className="check-all">
        <input
          type="checkbox"
          checked={checkedAll}
          onChange={onWrapCheckedAllChange} />全选
      </div>
    </div>
  )

  return (
    <div className="cart">
      header={<div>购物车</div>}
    </div>
  )
}

export default Cart;